<template>
	<section id="LayoutTop" class="b-theme">
		<div class="top_left">
			<div class="logo"></div>
			<p class="title">基于Vue的配置式渲染框架（JIESS）</p>
		</div>

		<section class="userInfo">
			<div class="avatarname">
				<el-dropdown class="dropdown" v-if="ui === 'element'" trigger="click" @command="handleCommand">
					<span class="dropdown-link">
						{{ lan('您的姓名') }}
						<i class="el-icon-arrow-down" />
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="chooseUI">{{ lan('切换UI') }}</el-dropdown-item>
						<el-dropdown-item command="chooseNav">{{ lan('切换导航') }}</el-dropdown-item>
						<el-dropdown-item command="chooseTheme">{{ lan('切换主题') }}</el-dropdown-item>
						<el-dropdown-item v-if="$mapping.J_sys.START_I18N" command="chooseLan">{{ lan('切换语言') }}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

				<Dropdown class="dropdown" v-else-if="ui === 'iview'" trigger="click" @on-click="handleCommand">
					<span class="dropdown-link">
						{{ lan('您的姓名') }}
						<Icon type="ios-arrow-down" />
					</span>
					<DropdownMenu slot="list">
						<DropdownItem name="chooseUI">{{ lan('切换UI') }}</DropdownItem>
						<DropdownItem name="chooseNav">{{ lan('切换导航') }}</DropdownItem>
						<DropdownItem name="chooseTheme">{{ lan('切换主题') }}</DropdownItem>
						<DropdownItem v-if="$mapping.J_sys.START_I18N" name="chooseLan">{{ lan('切换语言') }}</DropdownItem>
					</DropdownMenu>
				</Dropdown>
			</div>
		</section>
	</section>
</template>
<script>
export default {
	name: 'LayoutTop',
	data() {
		return {
			currentTheme: null
		};
	},
	mounted() {
		//读取历史风格
		this.changeColor(localStorage.getItem('theme') || 'theme4');
	},
	methods: {
		lan(name) {
			return this.$mapping.J_i18n(name, name, 'demo.page');
		},
		handleCommand(command) {
			if (command === 'chooseTheme') {
				this.$jiess.nodeTan.open({
					title: '切换主题',
					width: '300px',
					pageConfig: {
						form: { paramKey: 'chooseTheme' }
					},
					buttons: [
						{
							label: '确定',
							key: 'sure',
							click: ({ theme }, close) => {
								this.changeColor(theme);
								close();
							}
						}
					]
				});
			} else if (command === 'chooseUI') {
				this.$jiess.nodeTan.open({
					title: '选择UI',
					width: '300px',
					pageConfig: {
						form: { paramKey: 'chooseUI' }
					},
					buttons: [
						{
							label: '确定',
							key: 'sure',
							click: ({ storeUI }) => {
								localStorage.setItem('storeUI', storeUI);
								location.reload();
							}
						}
					]
				});
			} else if (command === 'chooseLan') {
				this.$jiess.nodeTan.open({
					title: '选择语言',
					width: '300px',
					pageConfig: {
						form: { paramKey: 'chooseLan' }
					},
					buttons: [
						{
							label: '确定',
							key: 'sure',
							click: ({ lang }) => {
								localStorage.setItem('lang', lang);
								location.reload();
							}
						}
					]
				});
			} else if (command === 'chooseNav') {
				this.$jiess.nodeTan.open({
					title: '选择导航',
					width: '300px',
					pageConfig: {
						form: { paramKey: 'chooseNav' }
					},
					buttons: [
						{
							label: '确定',
							key: 'sure',
							click: ({ storeNav }) => {
								localStorage.setItem('storeNav', storeNav);
								location.reload();
							}
						}
					]
				});
			}
		},
		changeColor(theme) {
			this.setTheme((this.currentTheme = theme));
		},
		setTheme() {
			document.documentElement.setAttribute('data-theme', this.currentTheme);
			this.$mapping.J_color.$theme = this.$mapping.J_color['$' + this.currentTheme];
			localStorage.setItem('theme', this.currentTheme);
		}
	}
};
</script>
<style lang="scss">
#LayoutTop {
	display: flex;
	justify-content: space-between;
	height: 60px;
	color: #fff;
	padding: 0 24px;
	min-width: 1080px;

	.top_left {
		display: flex;
		align-items: center;
	}

	.logo {
		width: 50px;
		height: 50px;
		overflow: hidden;
		background-color: white;
		border-radius: 50%;
	}

	.userInfo {
		display: flex;
		padding-right: 20px;
		align-items: center;
		justify-content: flex-end;
	}

	.title {
		position: relative;
		font-size: 22px;
		margin: 0 1.5rem 0 0.8rem;
	}

	.avatarname .dropdown {
		margin-left: 10px;
		color: #fff;
		cursor: pointer;
	}

	.dropdown-link {
		color: white;
		cursor: pointer;
	}
}
</style>
